<template>
  <div class="container app-container">
    <div class="title">项目管理</div>

    <!--   搜索表单   -->
    <div class="search-form">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-position="left"
        label-width="100px"
      >
        <el-row>
          <!-- 文字输入框 -->
          <el-col :span="6">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model="queryParams.projectName"
                placeholder="请输入"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="项目类型" prop="projectType">
              <el-select
                v-model="queryParams.projectType"
                placeholder="请选择项目类型"
                filterable
                :disabled="isOperate"
              >
                <el-option label="全部" value="" />
                <el-option
                  :key="item.code"
                  :label="item.info"
                  :value="item.code"
                  v-for="item in projectTypeList"
                  filterable
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="所在地区" prop="region">
              <el-input
                v-model="queryParams.region"
                placeholder="请输入"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="归属企业" prop="companyId">
              <el-select
                v-model="queryParams.companyId"
                placeholder="请选择"
                filterable
                :disabled="isOperate"
              >
                <el-option label="全部" value="" />
                <el-option
                  :key="item.id"
                  :label="item.companyNickName"
                  :value="item.id"
                  v-for="item in companyList"
                  filterable
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="归属运营商" prop="operatorId">
              <el-select
                v-model="queryParams.operatorId"
                placeholder="请选择"
                filterable
                :disabled="isOperate"
              >
                <el-option label="全部" value="" />
                <el-option
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                  v-for="item in operateList"
                  filterable
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建方式" prop="createType">
              <el-select
                v-model="queryParams.createType"
                placeholder="请选择"
                filterable
                :disabled="isOperate"
              >
                <el-option label="全部" value="" />
                <el-option
                  :key="item.code"
                  :label="item.info"
                  :value="item.code"
                  v-for="item in createTypeList"
                  filterable
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建人姓名" prop="createBy">
              <el-input
                v-model="queryParams.createBy"
                placeholder="请输入"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建人手机号" prop="createPhone">
              <el-input
                v-model="queryParams.createPhone"
                placeholder="请输入"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>

          <!-- 时间范围 -->
          <el-col :span="6">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker
                v-model="queryParams.createTime"
                style="width: 220px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <!-- 状态 -->
          <el-col :span="6">
            <el-form-item label="平台审核状态" prop="authStatus">
              <el-select
                v-model="queryParams.authStatus"
                placeholder="请选择"
                filterable
                :disabled="isOperate"
              >
                <el-option label="全部" value="" />
                <el-option
                  :key="item.code"
                  :label="item.info"
                  :value="item.code"
                  v-for="item in platformStatusList"
                  filterable
                />
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 搜索按钮 -->
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!--   表格头部控件   -->
    <div style="display: flex; align-items: center; justify-content: space-between">
      <div class="mb20" style="font-size: 13px">项目统计：{{ total }}</div>
      <el-row :gutter="10" class="mb8">
        <!-- 添加 -->
        <el-col :span="1.5">
          <!--      v-hasPermi="['online:plan:add']"      -->
          <el-button type="primary" size="mini" @click="addProject">新增项目 </el-button>
        </el-col>

        <el-col :span="1.5">
          <!--      v-hasPermi="['online:plan:add']"      -->
          <el-button type="primary" size="mini" plain @click="handleExportExcel"
            >导出EXCEL
          </el-button>
        </el-col>
        <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
      </el-row>
    </div>

    <!--   表格组件   -->
    <el-table
      border
      style="width: 100%"
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
      :height="tableHeight"
      ref="tableRef"
    >
      <el-table-column type="index" width="50"></el-table-column>

      <!-- 文本展示 -->
      <el-table-column label="项目名称" align="center" prop="projectName" width="150">
        <template slot-scope="scope">
          {{ scope.row.projectName ? scope.row.projectName : '-' }}
        </template>
      </el-table-column>

      <el-table-column label="项目类型" align="center" prop="projectTypeStr" width="150">
        <template slot-scope="scope">
          {{ scope.row.projectTypeStr ? scope.row.projectTypeStr : '-' }}
        </template>
      </el-table-column>

      <el-table-column label="所在地区" align="center" prop="region" width="150">
        <template slot-scope="scope">
          {{
            (scope.row.province || '') + (scope.row.city || '') + (scope.row.district || '') || '-'
          }}
        </template>
      </el-table-column>

      <el-table-column label="详细地址" align="center" prop="address" width="150">
        <template slot-scope="scope">
          {{ scope.row.address ? scope.row.address : '-' }}
        </template>
      </el-table-column>

      <el-table-column label="备注" align="center" prop="remark" width="150">
        <template slot-scope="scope">
          {{ scope.row.remark ? scope.row.remark : '-' }}
        </template>
      </el-table-column>

      <el-table-column label="归属企业" align="center" prop="companyName" width="150">
        <template slot-scope="scope">
          {{ scope.row.companyName ? scope.row.companyName : '-' }}
        </template>
      </el-table-column>

      <el-table-column label="归属运营商" align="center" prop="operatorName" width="150">
        <template slot-scope="scope">
          {{ scope.row.operatorName ? scope.row.operatorName : '-' }}
        </template>
      </el-table-column>

      <el-table-column label="创建方式" align="center" prop="createType" width="150">
        <template slot-scope="scope">
          {{ scope.row.createTypeStr ? scope.row.createTypeStr : '-' }}
        </template>
      </el-table-column>

      <el-table-column label="创建人" align="center" prop="createBy" width="150">
        <template slot-scope="scope">
          {{ scope.row.createBy ? scope.row.createBy : '-' }}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" prop="createTime" width="150">
        <template slot-scope="scope">
          {{ scope.row.createTime ? scope.row.createTime : '-' }}
        </template>
      </el-table-column>

      <el-table-column label="平台审核状态" align="center" prop="authStatusStr" width="150">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.jazx_clientcompany_enablestatus"
            :value="scope.row.authStatusStr"
          />
        </template>
      </el-table-column>

      <!-- 操作区 -->
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <!-- v-hasPermi="['library:course:edit']" -->
          <el-button size="mini" type="text" @click="lookDetail(scope.row)">查看详情</el-button>
          <el-button size="mini" type="text" @click="updateProject(scope.row)">编辑</el-button>
          <!-- <el-button size="mini" type="text" @click="syncCompanyDetail(scope.row)" v-if="scope.row.checkStatus != 1">同步</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!--   分页组件   -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      ref="pageHeight"
    />
  </div>
</template>
<script>
import { pageList } from '@/api/project';
import { download } from '@/utils/request';
import ProjectModal from '@/views/platform/project/list/ProjectModal.vue';
import {
  getCompanyList,
  getOperateList,
  createTypeEnum,
  authStatusEnum,
} from '@/api/common';
import dayjs from 'dayjs';

export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { ProjectModal },
  dicts: ['jazx_clientcompany_enablestatus', 'jazx_company_check_status'],
  // 变量区
  data: () => ({
    // 选中数组
    ids: [],
    showSearch: true,
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      projectName: null,
      projectType: null,
      companyId: null,
      region: null,
      authStatus: null,
      operatorId: null,
      createType: null,
      createPhone: null,
      createBeginTime: null,
      createEndTime: null,
      createBy: null,
    },
    isOpenAddProjectModal: false,
    loading: false,
    //table 高度
    tableHeight: null,
    //分页器高度
    pageHeight: null,
    // 总条数
    total: 1,
    // 列表数据
    list: [],
    // 归属部门列表
    deptList: [],
    //归属企业列表
    companyList: [],
    //归属运营商列表
    operateList: [],
    //平台实名状态列表
    platformStatusList: [],
    //项目类型列表
    projectTypeList: [
      {
        code: 1,
        info: '挖沙',
      },
      {
        code: 2,
        info: '清淤',
      },
      {
        code: 3,
        info: '施工',
      },
      {
        code: 4,
        info: '运输',
      },
    ],
    //创建类型列表
    createTypeList: [],
  }),
  // 页面加载后默认执行的方法
  async mounted() {
    this.queryParams.operateId = this.isOperate ? this.$store.getters.operateId : null;
    await this.handleDeptQuery(this.getList);
    // 执行列表刷新
    await this.handleQuery();
    this.getCompanyList();
    this.getPlatformStatusList();
    this.getOperateList();
    this.getCreateTypeList();

    this.tableHeight =
      window.innerHeight -
      this.$refs.tableRef.$el.getBoundingClientRect().top -
      this.$refs.pageHeight.$el.clientHeight -
      60;
  },
  computed: {
    isOperate() {
      return (
        this.$store.getters.roles.includes('yys_super_admin') ||
        this.$store.getters.roles.includes('yys_admin') ||
        this.$store.getters.roles.includes('yys_js') ||
        this.$store.getters.roles.includes('yys_yyry')
      );
    },
  },
  methods: {
    dayjs,
    // 归属部门列表查询
    handleDeptQuery(getListFn) {
      // getOperateAndChannel().then((res) => {
      //   this.deptList = res.data;
      //   getListFn?.();
      // });
    },
    // 列表查询
    handleQuery() {
      this.getList();
    },
    // 重置查询
    resetQuery() {
      this.queryParams = {
        ...this.queryParams,
        pageNum: 1,
        pageSize: 10,
        operatorId: this.isOperate ? this.$store.getters.operateId : null,
        companyId: this.isOperate ? this.$store.getters.operateId : null,
        projectName: null,
        projectType: null,
        region: null,
        authStatus: null,
        createType: null,
        createPhone: null,
        createTime: null,
        createBeginTime: null,
        createEndTime: null,
        createBy: null,
      };
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    // 请求列表数据
    getList() {
      this.loading = true;
      let query = {
        ...this.queryParams,
        createBeginTime: this.queryParams.createTime?.[0]
          ? this.queryParams.createTime[0] + ' 00:00:00'
          : null,
        createEndTime: this.queryParams.createTime?.[0]
          ? this.queryParams.createTime[1] + ' 23:59:59'
          : null,
      };
      delete query.createTime;
      pageList(query)
        .then((res) => {
          this.list = res.data;
          // this.customerList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * 新增
     */
    addProject() {
      this.$router.push({ name: 'SaveProject' });
    },
    /**
     * 修改
     */
    updateProject(row) {
      this.$router.push({ name: 'SaveProject', query: { id: row.id } });
    },
    /**
     * 获取归属企业下拉列表
     */
    getCompanyList() {
      getCompanyList().then((res) => {
        this.companyList = res.data;
      });
    },
    /**
     * 获取归属运营商下拉列表
     */
    getOperateList() {
      getOperateList().then((res) => {
        this.operateList = res.data.operateList;
      });
    },
    /**
     * 获取创建类型下拉列表
     */
    getCreateTypeList() {
      createTypeEnum().then((res) => {
        this.createTypeList = res.data;
      });
    },
    /**
     * 获取平台状态下拉列表
     */
    getPlatformStatusList() {
      authStatusEnum().then((res) => {
        this.platformStatusList = res.data;
      });
    },
    // 导出excel
    handleExportExcel() {
      download('/project/export', { ...this.queryParams }, '项目列表.xlsx').then(() => {
        this.$message.success('导出成功');
      });
    },
    // 跳转详情
    lookDetail(row) {
      this.$router.push({ name: 'ProjectDetail', query: { id: row.id } });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
  font-size: 13px;
}

.status {
  &.normal {
    color: #ffa14b;
  }
  &.disable {
    color: red;
  }
}

.title {
  margin-bottom: 20px;
}
</style>
